<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <title>对图片预览的封装</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            font-size: 0;
        }

        *,
        ::before,
        ::after {
            padding: 0;
            margin: 0;
        }

        .clearfix::before,
        .clearfix::after {
            content: " ";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }


        
        .images-box {
            width: 80%;
            margin: 0px auto;
        }



        .images-box ul {
            list-style: none;
        }

        .images-box ul li {
            width: 25%;
            float: left;
            box-sizing: border-box;
            padding: 30px;
            transition: all 0.5s;
            transform: scale(1);
        }

        @media (max-width: 768px) {
            .images-box{
                width: 100%;
            }
            .images-box ul li{
                padding:10px;
            }

        }

        .images-box ul li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: middle;
        }

        .images-box ul li:hover {
            transform: scale(1.2);
        }

    </style>
</head>
<body>
<div class="images-box">
    <ul class="clearfix">
        <li><img src="http://image5.tuku.cn/pic/wallpaper/youxidongman/wumeidongrendedongmanmeinvbizhi/025.jpg" alt="">
        </li>
        <li><img src="http://www.pp3.cn/uploads/201701/2017021708.jpg" alt=""></li>
        <li><img src="http://bizhi.zhuoku.com/2009/08/28/dongmanjingxuan/dongman254.jpg" alt=""></li>
        <li><img src="http://image5.tuku.cn/pic/wallpaper/youxidongman/lolihuajiTinKlebizhi/003.jpg" alt=""></li>
        <li><img src="http://img2.niutuku.com/desk/anime/1737/1737-3049.jpg" alt=""></li>
        <li><img src="http://pic.qiantucdn.com/58pic/17/89/87/55a73a600f7b3_1024.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

<script src="index.js"></script>
<script>

    window.onload = function () {
        var images = [];
        var lis = document.getElementsByClassName("images-box")[0].getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
            var obj = lis[i];
            obj.style.height = obj.offsetWidth + 'px';
            images.push(obj.children[0].src);
        }


        resize();
        function resize() {
            var time = setTimeout(function () {
                clearTimeout(time);
                var lis = document.getElementsByClassName("images-box")[0].getElementsByTagName("li");
                var liWidth = lis[0].offsetWidth;
                for (var i = 0; i < lis.length; i++) {
                    var obj = lis[i];
                    obj.style.height = liWidth + 'px';
                }
            },200);
        }

        window.onresize = resize;
        var prev = new ImagePrev({
            imageArray : images
        });
    }

</script>